<template>
	<view ref="objBox" style="touch-action: none;width: 100%;height:100%;">
		<canvas style="width:100%;height:100%;" canvas-id="firstCanvas" id="myCanvas"></canvas>
	</view>
</template>

<script module="three" lang="renderjs">
	import {
		ConfettiEjector,
		CanvasRender,
		CustomShape
	} from 'confetti-ts-canvas';
	export default {
		data() {
			return {
				canvasWidth: 0,
				canvasHeight: 0,
			}
		},
		mounted() {
			let that = this;

			that.canvasWidth = window.innerWidth;
			that.canvasHeight = window.innerHeight;
			that.fnYanHua();
		},
		methods: {
			//烟花特效
			fnYanHua() {
				var that = this;

				//确保已经存在canvas标签在页面内
				const canvas = document.querySelector("canvas");
				canvas.width = window.innerWidth;
				canvas.height = window.innerHeight;
				const g = canvas.getContext("2d");

				const canvasRender = new CanvasRender();
				canvasRender.init(
					//必填 CanvasContext
					g,
					// //可选填入
					{
						width: that.canvasWidth,
						height: that.canvasHeight,
					},
					//以下参数全部可选填入
					{
						onFinished() {
							console.log("完成")
							document.getElementById('yanhuaBox').style.zIndex = 99;
						},
						displayFps: true,
						grivaty: .5,
					}
				);

				//确保已经存在canvas标签在页面内
				const pao = new ConfettiEjector(canvasRender, {
					limitAngle: [225, 315], //喷发角度区间[-∞,+∞]
					count: 1000, //喷发纸片数量
				});
				const boom = pao.create({
					x: 0,
					y: -100, //喷发位置11
					clampforce: [10, 60], //喷发力度
					radius: 8, //纸片大小
				});
				pao.fire(boom);
			},

		}
	}
</script>

<style>
	page {
		overflow: hidden;
	}
</style>